<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" />
		<title>translate3D错位移动</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				background-image: radial-gradient(circle 5px at top left, rgba(226, 226, 226,0.1) 0%, rgba(226, 226, 226,0.1) 50%,rgba(201, 201, 201,0.1) 50%, rgba(201, 201, 201,0.1) 30%,transparent 30%, transparent 50%),linear-gradient(90deg, rgb(51,51,51),rgb(51,51,51)); background-size: 11px 11px;
			}

			p {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: #fff;
			}

			.wrapper {
				height: calc(100% - 30px);
				width: 100%;
				perspective: 1px;
				overflow: auto;
			}

			.wrapper-in-wrapper {
				width: 100%;
				height: 240vh;
				
				transform-style: preserve-3d;
				position: relative;
				
			}

			.circle {
				position: absolute;
				left: 20%;
				top: 500px;
				width: 20vw;
				height: 20vw;
				background-color: red;
				border-radius: 50%;
				transform: translate3D(-50%, -120px, -1px) scale(2);
			}

			.cube {
				position: absolute;
				right: 20%;
				top: 500px;
				width: 20vw;
				height: 20vw;
				background-color: blue;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<p>向下滑动/滚动屏幕，圆和方块会随着滚动渐渐错位</p>
		<div class="wrapper">
			<div class="wrapper-in-wrapper">
				<div class="circle"></div>
				<div class="cube"></div>
			</div>
		</div>
	</body>
</html>
